<template>
	<view class="quick-wrap">
		<!--	金刚区	-->
		<view class="quick-menu">
			<view class="menu-item" v-for="(item, index) in menuList" :key="index" @click.stop="handleClickMenu(item)">
				<image :src="imgBaseUrl + item.icon" class="icon-88" />
				<view class="text-center mt-8 text-ellipsis">
					{{ subString(item.name) }}
				</view>
			</view>
		</view>
		<!--公告-->
		<view class="notice-wrap fs-24" v-if="noticeList.length">
			<view class="flex-a">
				<view class="bd-right flex-a">
					<image :src="imgBaseUrl + 'icon-notice.png'" class="icon-32" />
					<image :src="imgBaseUrl + 'notice-text.png'" class="notice-text" />
				</view>
			</view>
			<swiper :circular="true" :autoplay="true" :vertical="true" class="notice-swiper">
				<swiper-item v-for="item in noticeList" :key="item.id" @click.stop="jumpLinkTo(item.link)">
					<view class="notice-item">
						<text class="c-black-1d ml-32 flex-1 text-ellipsis">
							{{ item.title }}
						</text>
						<view class="notice-time">{{ dataToDate(item.create_time, 4) }}</view>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<!--腰部轮播-->
		<view class="banner-ad" v-if="waistList.length">
			<swiper
				:circular="true"
				:autoplay="true"
				@change="(event) => (swiperAdIndex = event.detail.current)"
				class="swiper-con"
			>
				<swiper-item v-for="(item, index) in waistList" :key="index" @click.stop="jumpLinkTo(item.link)">
					<view
						class="swiper-item"
						:style="{
							backgroundImage: `url(${item.image_url})`,
							borderRadius: '16rpx',
						}"
					></view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>
<script setup lang="ts">
import { dataToDate, subString } from "@/mixins/mixins"
import { jumpLinkTo, navigateTo } from "@/utils/page-redirect"

const imgBaseUrl = inject("imgBaseUrl")
const swiperAdIndex = ref(0)

defineProps({
	menuList: {
		type: Array,
		default: [],
	},
	noticeList: {
		type: Array,
		default: [],
	},
	waistList: {
		type: Array,
		default: [],
	},
})

const handleClickMenu = (menu: any) => {
	console.log("click menu", menu)
	if (menu?.url) {
		navigateTo(menu.url)
	}
}
</script>

<style lang="scss" scoped>
.quick-wrap {
	padding: 36rpx 24rpx;
	border-radius: 24rpx;
	background: #ffffff;
	.quick-menu {
		display: flex;
		flex-wrap: wrap;
		.menu-item {
			margin-bottom: 24rpx;
			width: 20%;
			display: flex;
			flex-direction: column;
			align-items: center;
			font-size: 24rpx;
			color: #000000;
		}
	}
}
.notice-wrap {
	margin: 8rpx 0 24rpx;
	padding: 24rpx;
	background: rgba(254, 224, 56, 0.08);
	height: 84rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	.notice-text {
		width: 50rpx;
		height: 24rpx;
		margin-left: 4rpx;
	}
	.notice-swiper {
		flex: 1;
		height: 100%;
		swiper-item {
			display: flex;
			flex-direction: column;
			justify-content: center;
		}
		.notice-item {
			display: flex;
			align-items: center;
		}
		.notice-time {
			margin-left: 28rpx;
			color: $c-grey-86;
		}
	}
	.bd-right {
		position: relative;
		&::before {
			position: absolute;
			content: "";
			right: -16rpx;
			top: 6rpx;
			bottom: 6rpx;
			width: 2rpx;
			background: rgba(134, 144, 156, 0.3);
		}
	}
}

.banner-ad {
	height: 208rpx;
	.swiper-con,
	.swiper-item {
		width: 100%;
		height: 100%;
		background-size: cover;
		background-position: center center;
	}
}
</style>
